<template>
    <view class="pub_page pub_page_bg pub_crystal pub_header_padding">
        <pub-head headerName="crystal" :headerConfig="headerConfig" @headerBack="headerBack"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="top_div">
                <div class="tab_div" v-if="categoryList.length">
                    <div class="tab" :class="cType == li.id ? 'tab_active' : ''" @click="cTypeClick(li.id)"
                        v-for="(li, key) in categoryList" :key="key">{{ li.name }}</div>
                </div>
                <div class="search_div" v-if="categoryList.length">
                    <input v-model="searchVal" class="input" type="text" placeholder="请输入搜索关键词">
                    <div class="btn" @click="toSearch"></div>
                </div>
            </div>
            <z-paging ref="Zpaging" class="lis_div" v-model="list" @query="getList" :refresher-enabled="false"
                :fixed="false">
                <div class="lis">
                    <div class="li" v-for="(li, key) in list" :key="key"
                        @click="$comFun.openWin('/pages/crystal/detail', { spuId: li.spuId, cover: li.cover, goodsName: li.goodsName })">
                        <pub-image class="img" :src="li.cover"></pub-image>
                        <div class="p_1">{{ li.goodsName }}</div>
                        <div class="p_2">售价：<span class="txt">{{ li.salePrice }}</span> 金币</div>
                    </div>
                </div>
            </z-paging>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '人脉商城',//标题栏内容
                title_color: '#fff',
                left_type: 3,
                left_content: 'white',
                right_type: 1,//右侧区域类型  0不出现  1文字  2图片
                right_color: '#fff',
                right_content: '我的订单',//右侧内容  right_type为1时文字内容 为2时图片链接
            },

            categoryList: [],
            cType: '',
            searchVal: '',
            list: [],
        };
    },
    onLoad() {
        this.getCategory();
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    methods: {
        headerBack(data) {
            if (data.name == 'crystal' && data.type == 'right') {
                this.$comFun.openWin('/pages/crystal/order');
            }
        },
        async getCategory() {
            this.$comFun.openLoading();
            const res = await this.$request.get('goods/getCrystalCategoryList', {});
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.categoryList = res.result.list;
                if (this.categoryList.length > 0) this.cTypeClick(this.categoryList[0].id);
            }
        },
        cTypeClick(id) {
            this.cType = id;
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        },
        toSearch() {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        },
        async getList(pageNo, pageSize) {
            const res = await this.$request.get('goods/getCrystalGoodsPage', {
                pageNo: pageNo,
                pageSize: 30,
                categoryId: this.cType,
                name: this.searchVal,
            });
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                this.$refs.Zpaging.complete(res.result.list);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/crystal.scss";
</style>
